<template>
  <div class="base_info">
    <div class="warn-box">
      <svg-icon
        style="margin-right: 17px"
        icon-class="warn"
        :size="20"
      />
      <p>重要提示：店铺头像、店铺名称会直接展示给买家，请认真填写。</p>
    </div>
    <div class="label_title">
      <p>基础信息</p>
    </div>
    <div class="flex flex-wrap list_info">
      <div class="list_item">
        <label>店铺头像：</label>
        <div>
          <crop-upload
            ref="cropUpload"
            show-type="photo"
            :init-val="infoData.photo"
            wrapper-width="95px"
            wrapper-height="95px"
            :photo-width="95"
            :photo-height="95"
            :hideDelete="!$hasMethod('#edit')"
            @setVal="imgChange"
          ></crop-upload>
        </div>
      </div>
      <div class="list_item">
        <label>店铺编号：</label>
        <p>{{infoData.id}}</p>
      </div>
      <div class="list_item">
        <label>店铺名称：</label>
        <div class="flex align-center">
          <p v-if="!nameEdit">{{infoData.shopname}}</p>
          <el-input
            v-else
            style="width:300px"
            placeholder="请输入店铺名称"
            v-model="infoData.shopname"
            clearable
          >
          </el-input>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="saveName"
          >{{nameEdit?'保存':'修改'}}</span>
        </div>
      </div>
      <div class="list_item">
        <label>经营项目：</label>
        <p>{{infoData.category_name}}</p>
      </div>
      <!-- <div class="list_item">
        <label>账户类型：</label>
        <p>{{infoData.account_name}}</p>
      </div> -->
      <div class="list_item">
        <label>是否开启风控：</label>
        <p>{{infoData.account_type==1?'是':'否'}}</p>
      </div>
      <div class="list_item">
        <label>发票类型：</label>
        <div class="flex align-center">
          <p v-if="!invoiceEdit">{{infoData.faptype_name}}</p>
          <el-select
            v-else
            clearable
            v-model="infoData.faptype"
          >
            <el-option
              label="普通发票"
              value="1"
            ></el-option>
            <el-option
              label="增值税发票"
              value="2"
            ></el-option>
            <el-option
              label="普通发票+增值税发票"
              value="1,2"
            ></el-option>
          </el-select>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="saveInvoice"
          >{{invoiceEdit?'保存':'修改'}}</span>
        </div>
      </div>
      <div class="list_item">
        <label>当前经营位置：</label>
        <div class="flex align-center">
          <p v-if="!posEdit">{{shopcity}}</p>
          <el-cascader
            v-else
            clearable
            filterable
            placeholder="请选择当前经营位置"
            v-model="infoData.shopcity"
            :options="regionList"
            :props="optionProps"
            separator="-"
          ></el-cascader>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="savePos"
          >{{posEdit?'保存':'修改'}}</span>
        </div>
      </div>
      <div class="list_item">
        <label>签署合同类型：</label>
        <div class="flex align-center">
          <p v-if="!contractEdit">{{infoData.contract_type_name}}</p>
          <el-select
            v-else
            clearable
            v-model="infoData.contract_type"
          >
            <el-option
              label="蚂蚁智能合同"
              :value="1"
            ></el-option>
            <el-option
              label="E签宝合同"
              :value="2"
            ></el-option>
          </el-select>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="saveContract"
          >{{contractEdit?'保存':'修改'}}</span>
        </div>
      </div>
      <div class="list_item">
        <label>签署方式：</label>
        <div class="flex align-center">
          <p v-if="!signNumEdit">{{infoData.sign_num_name}}</p>
          <el-select
            v-else
            clearable
            v-model="infoData.sign_num"
          >
            <el-option
              label="自营两方"
              :value="1"
            ></el-option>
            <el-option
              label="供应商两方"
              :value="2"
            ></el-option>
            <el-option
              v-if="infoData.contract_type!=1"
              label="三方"
              :value="3"
            ></el-option>
          </el-select>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="saveSignNum"
          >{{signNumEdit?'保存':'修改'}}</span>
        </div>
      </div>
    </div>
    <div class="label_title">
      <p>联系方式</p>
    </div>
    <div class="flex flex-wrap list_info">
      <div class="list_item">
        <label>店铺联系人：</label>
        <p>{{infoData.people}}</p>
      </div>
      <div class="list_item">
        <label>联系人手机号：</label>
        <p>{{infoData.contact_tel}}</p>
      </div>
      <div class="list_item">
        <label>店铺客服电话：</label>
        <div class="flex align-center">
          <p v-if="!telEdit">{{infoData.mobile}}</p>
          <el-input
            v-else
            clearable
            v-model="infoData.mobile"
            @input="val=>changeNumberInput(val)"
          ></el-input>
          <span
            v-if="$hasMethod('#edit')"
            class="blue-font pointer"
            @click="saveTel"
          >{{telEdit?'保存':'修改'}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cropUpload from "@/components/cropUpload";
import { checkMobile, checkPhone } from "@/utils/validate";
import { shopBaseInfo, editShopBaseInfoById } from "@/api/shop";
import { getRegion } from "@/api/index";
export default {
  components: { cropUpload },
  data() {
    return {
      infoData: {
        photo: ''
      },
      nameEdit: false,
      invoiceEdit: false,
      posEdit: false,
      contractEdit: false,
      signNumEdit: false,
      telEdit: false,
      optionProps: {
        value: 'name',
        label: 'name',
        expandTrigger: 'hover',
        children: 'sub'
      },
      regionList: [],
      shopcity: ''
    }
  },
  methods: {
    changeNumberInput(value) {
      const pattern = /^[1-9][0-9]*$/ // 正整数的正则表达式
      // 不符合正整数时
      if (!pattern.test(value)) {
        // input 框绑定的内容为空
        this.infoData.mobile = ''
      }
    },
    saveTel() {
      if (this.telEdit) {
        if (!this.infoData.mobile) {
          this.$message({
            message: "店铺客服电话不能为空",
            type: "warning"
          });
          return;
        }
        editShopBaseInfoById({
          id: this.infoData.id,
          mobile: this.infoData.mobile
        }).then(res => {
          this.telEdit = false;
        })
      } else {
        this.telEdit = true;
      }
    },
    saveSignNum() {
      if (this.signNumEdit) {
        editShopBaseInfoById({
          id: this.infoData.id,
          sign_num: this.infoData.sign_num
        }).then(res => {
          shopBaseInfo().then(res => {
            this.infoData.sign_num_name = res.sign_num_name;
            this.signNumEdit = false;
          })
        })
      } else {
        this.signNumEdit = true;
      }
    },
    saveContract() {
      if (this.contractEdit) {
        editShopBaseInfoById({
          id: this.infoData.id,
          contract_type: this.infoData.contract_type
        }).then(res => {
          shopBaseInfo().then(res => {
            this.infoData.contract_type_name = res.contract_type_name;
            this.contractEdit = false;
          })
        })
      } else {
        this.contractEdit = true;
      }
    },
    savePos() {
      if (this.posEdit) {
        let shopcity = this.infoData.shopcity;
        shopcity = shopcity.join('-');
        editShopBaseInfoById({
          id: this.infoData.id,
          shopcity: shopcity
        }).then(res => {
          this.posEdit = false;
          this.shopcity = shopcity;
        })
      } else {
        this.posEdit = true;
      }
    },
    saveInvoice() {
      if (this.invoiceEdit) {
        editShopBaseInfoById({
          id: this.infoData.id,
          faptype: this.infoData.faptype
        }).then(res => {
          shopBaseInfo().then(res => {
            this.infoData.faptype_name = res.faptype_name;
            this.invoiceEdit = false;
          })
        })
      } else {
        this.invoiceEdit = true;
      }
    },
    saveName() {
      if (this.nameEdit) {
        if (!this.infoData.shopname) {
          this.$message({
            message: "店铺名称不能为空",
            type: "warning"
          });
          return;
        }
        editShopBaseInfoById({
          id: this.infoData.id,
          shopname: this.infoData.shopname
        }).then(res => {
          this.nameEdit = false;
        })
      } else {
        this.nameEdit = true;
      }
    },
    imgChange(val) {
      if (val) {
        editShopBaseInfoById({
          id: this.infoData.id,
          photo: val
        }).then(res => {
          this.infoData.photo = val;
        })
      } else {
        this.infoData.photo = val;
      }
    },
    getData() {
      shopBaseInfo().then(res => {
        this.infoData = res || {};
        this.shopcity = this.infoData.shopcity;
        const cityArr = this.infoData.shopcity.split('-');
        this.infoData.shopcity = cityArr[0] && cityArr[1] && cityArr[2] ? cityArr : [];
      })
    },
    getProvice() {
      getRegion().then(res => {
        this.regionList = res ? res[0].sub : [];
      })
    }
  },
  mounted() {
    this.getData();
    this.getProvice();
  }
}
</script>

<style lang="scss" scoped>
.list_item {
  & > div,
  & > p {
    & > span {
      margin-left: 20px;
    }
  }
  .el-input,
  .el-select {
    width: 200px;
  }
}
</style>